<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/elementUI.css" />
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.min.js" type="text/javascript"></script>
		<script src="js/elementUI.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{msg}}</h1>
			<el-button @click="ajax()">发送AJAX</el-button>
		</div>
	</body>
	<script>
		new Vue({
			//作用域
			el: '#app',
			//初始化数据
			data: {
				msg:'前后端交互'
			},
			//函数写在这里
			methods: {
				ajax(){
					//发送axios的post请求
                    // var params = new URLSearchParams();
					// params.append('sno', "18413001");
					// params.append('sname', "程麒阁");
                    
					// axios.post("url地址", params).then(res => {
					//	console.log(res)
					// })

					//发送axios的get请求
					axios.get('./json/api.json').then(res=>{
						//打印返回的数据
						console.log(res.data)
						//打开消息提示
						this.$notify({
							title: '前后端交互',
							type:'success',
							message:'数据获取成功，请打开控制台查看'
						})
					})
				}
			}
		})
	</script>
</html>
